<template>
	<s-layout title="素材库" tabbar="/pages/index/material" :showLeftBtn="false">
		<view :style="[{ paddingTop: sheep.$platform.navbar + 'px' }]"
			style="position: fixed; top: 0; right: 0; left: 0; z-index: 99; background: #fff">
			<uni-search-bar placeholder="搜索关键字" radius="27" @confirm="search" @cancel="search" />
			<su-tabs :list="state.tabs" lineColor="#F52F1F" :scrollable="false" @change="changeTab"
				:current="state.activeTab"></su-tabs>
		</view>
		<!--		<su-sticky bgColor="#fff">-->
		<!--			<uni-search-bar placeholder="搜索关键字" radius="27" @confirm="search" @cancel="search" />-->
		<!--			<su-tabs :list="state.tabs" lineColor="#F52F1F" :scrollable="false" @change="changeTab"-->
		<!--				:current="state.activeTab"></su-tabs>-->
		<!--		</su-sticky>-->
		<view class="content">
			<view class="card" v-for="item in state.list" :key="item.id">
				<view class="user-box">
					<img :src="item.is_anon==2? '/static/avatar.png':sheep.$url.cdn(item.user_avatar)" alt=""
						class="avatar" />
					<view class="user">
						<view class="name">{{item.is_anon==2? hideName(item.user_nickname) : item.user_nickname}}</view>
						<view>{{item.createtime.substring(0,10)}}</view>
					</view>
					<view class="downloadImage" @click="download(item.images)" v-if="userInfo.group_id != 1">
						<uni-icons type="download" size="18" />
						<text>下载素材</text>
					</view>
				</view>
				<view class="desc" @click="copy(item.content)">
					<view class="desc-title">
						{{item.title}}
					</view>
					{{item.content}}
				</view>
				<uni-grid :column="3" :showBorder="false" :square="false" :highlight="false">
					<uni-grid-item v-for="(image,index) in item.images" :key="index">
						<su-image isPreview :previewList="item.images" :current="index" :src="image" :height="200"
							:width="200" mode="aspectFill" v-model:callShow="state.callShow"></su-image>
					</uni-grid-item>
				</uni-grid>
				<view class="goods-box" @click="sheep.$router.go('/pages/goods/index', {id: item.goods_id,})">
					<image class="goods-img" :src="sheep.$url.cdn(item.goods_image)" mode=""></image>
					<view class="ss-flex-col ss-flex-1">
						<view class="goods-name ss-m-b-10">{{item.goods_name}}</view>
						<view class="goods-price">￥{{item.goods_price || 0}}</view>
					</view>
				</view>
				<!--				<view class="operate">-->
				<!--					<view @click="download(item.images)"><uni-icons type="download" size="18" />下载素材</view>-->
				<!--					<view @click="copy(item.content)"><uni-icons type="compose" size="18" />一键复制文案</view>-->
				<!--				</view>-->
			</view>
		</view>

		<uni-load-more v-if="state.list.length > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadmore" />
		<s-empty v-if="state.list.length === 0" icon="/static/soldout-empty.png" text="暂无商品">
		</s-empty>

		<view class="add-btn" v-if="userInfo.group_id != 1">
			<button class="ss-reset-button post-btn ui-BG-Main-Gradient" @tap="toAddMaterial">
				<!--        <uni-icons type="plusempty" size="28" color="#fff" style="font-weight: bold"></uni-icons>-->
				<image class="" src="/static/icon/add.png" mode=""></image>
			</button>
		</view>
	</s-layout>
</template>

<script setup>
import {
	reactive,
	computed
} from 'vue';
import {
	onLoad,
	onShow,
	onReachBottom
} from "@dcloudio/uni-app"
import sheep from '@/sheep';
// 隐藏原生tabBar
uni.hideTabBar({
	fail: () => {},
});

const userInfo = computed(() => sheep.$store('user').userInfo);

const state = reactive({
	keyword: "",
	activeTab: 0,
	tabs: [{
		name: '素材',
	}, {
		name: '评价',
	}],
	list: [],
	page: 1,
	pageSize: 20,
	loadStatus: 'noMore',
	callShow: true
})

//隐藏昵称中间部分
function hideName (name) {
	if (name.length > 2) {
		return name.substring(0, 1) + '***' + name.substring(name.length - 1, name.length)
	} else {
		return name.substring(0, 1) + '***'
	}
}

function search (e) {
	state.keyword = e.value;
	emptyList();
	getList();
}

function changeTab (value) {
	state.activeTab = value.index;
	emptyList();
	getList();
}

async function getList () {
	state.loadStatus = 'loading';
	const info = {
		keyword: state.keyword,
		p: state.page,
		pagesize: state.pageSize
	}
	let res = {}
	if (state.activeTab == 0) {
		res = await sheep.$api.material.sourceScList(info);
	} else {
		res = await sheep.$api.material.commentList(info);
	}
	if (res.code === 1) {
		let newArr = res.data
		let initArr = state.list ? state.list : []
		const lastListNum = newArr.length
		if (state.page == 1) {
			state.list = res.data
		} else {
			state.list = initArr.concat(newArr)
		}
		if (lastListNum < state.pageSize) {
			state.loadStatus = 'noMore';
		} else {
			state.loadStatus = 'more';
		}
	}
}

function emptyList () {
	state.page = 1;
	state.list = [];
	state.loadStatus = 'noMore';
}

// 加载更多
function loadmore () {
	if (state.loadStatus !== 'noMore') {
		state.page++;
		getList();
	}
}

function download (urls) {
	//获取用户的当前设置。获取相册权限
	uni.getSetting({
		success: (res) => {
			//如果没有相册权限
			if (!res.authSetting["scope.writePhotosAlbum"]) {
				//向用户发起授权请求
				uni.authorize({
					scope: "scope.writePhotosAlbum",
					success: () => {
						//授权成功保存图片到系统相册
						saveNetImageToLocal(urls);
					},
					//授权失败
					fail: () => {
						uni.showToast({
							title: "未授权保存图片到相册！",
						});
					},
				});
			} else {
				saveNetImageToLocal(urls);
			}
		},
		fail: (res) => {},
	});
}

//保存网络图片到本地
function saveNetImageToLocal (urls) {
	uni.showLoading({
		title: '正在保存图片...'
	});
	let index = 0
	urls.forEach(item => {
		uni.downloadFile({
			url: item,
			success: (res) => {
				if (res.statusCode === 200) {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: (res) => {
							index++;
							// 全部下载完后触发
							if (index == urls.length) {
								uni.hideLoading()
								that.successFun();
								return uni.showToast({
									title: "保存成功！",
								});
							}
						},
						fail: (res) => {
							uni.hideLoading();
							console.log(res.errMsg);
							return uni.showToast({
								title: res.errMsg,
								icon: 'error'
							});
						},
						//无论成功失败都走的回调
						complete: (res) => {
							uni.hideLoading();
						},
					});
				} else {
					uni.showToast({
						title: '网络错误',
						icon: 'error'
					});
				}
			}
		});
	})
}

function copy (text) {
	uni.setClipboardData({
		data: text
	});
	uni.showToast({
		title: '复制成功~'
	})
}

function toAddMaterial () {
	uni.navigateTo({
		url: "/pages/material/add"
	})
}

onLoad((options) => {
	getList();
});

onShow(() => {
	if (state.callShow) {
		emptyList();
		getList();
	} else {
		state.callShow = true
	}
});

// 上拉加载更多
onReachBottom(() => {
	loadmore();
});
</script>

<style lang="scss" scoped>
.content {
	//padding: 0 28rpx;
	margin-top: 107px;
}

.card {
	background-color: #fff;
	border-radius: 16rpx;
	margin: 28rpx 0;
	padding: 26rpx 24rpx;

	.user-box {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 75rpx;
		height: 75rpx;
		background-color: #ccc;
		border-radius: 50%;
	}

	.user {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 5rpx 20rpx;
		font-size: 22rpx;
		color: #999999;

		.name {
			font-weight: bold;
			font-size: 25rpx;
			color: #111827;
			margin-bottom: 6rpx;
		}
	}

	.downloadImage {
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;

		.uni-icons {
			margin-right: 10rpx;
		}
	}

	.desc {
		font-size: 26rpx;
		color: #666666;
		margin: 20rpx 0;

		.desc-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #272636;
			margin-bottom: 12rpx;
		}
	}

	.goods-box {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		background: #F7F7F7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 12rpx 20rpx;

		.goods-img {
			width: 62rpx;
			height: 62rpx;
			border-radius: 6rpx;
			margin-right: 15rpx;
			background-color: #ccc;
		}

		.goods-name {
			flex: 1;
			font-weight: bold;
			font-size: 20rpx;
			color: #1A1A1A;
		}

		.goods-price {
			font-size: 18rpx;
		}

	}

	.uni-grid-item {
		box-sizing: border-box;
		padding: 10rpx;
	}

	.operate {
		position: relative;
		display: flex;
		justify-content: space-around;
		border-top: 2rpx solid #F7F7F7;
		margin-top: 20rpx;

		>view {
			padding: 38rpx 0;
			flex: 1;
			font-size: 26rpx;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: center;

			&:nth-child(2) {
				border-left: 2rpx solid #F7F7F7;
			}

			.uni-icons {
				margin-right: 10rpx;
			}
		}
	}
}

.post-btn {
	width: 90rpx;
	height: 90rpx;
	border-radius: 100%;
	font-size: 60rpx;
	color: rgba(#fff, 0.9);
}

.add-btn {
	position: fixed;
	bottom: 200rpx;
	right: 25rpx;

	image {
		width: 100%;
		height: 100%;
	}
}
</style>